<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>狗洋记账</title>
    <link rel="stylesheet" href="css/manage.css">
    <link rel="stylesheet" href="css/menu.css">

    <script src="js/timeNow.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/verify_date.js"></script>
    <script src="js/tojson.js"></script>
    <script src="js/manage_main.js"></script>
    <script src="js/welcome.js"></script>
    <script src="js/prefix.js"></script>
    <script src="js/date_format.js"></script>
    <script src="js/menu.js"></script>
    <script src="js/download.js"></script>

</head>
<body>
<div id="menu"></div>
<div class="d0">

    <div class="d1">
        <h2 style="height: 20px"><span id="month"></span>支出列表：
            <input type="button" value="显示" id="show_all">
            <input type="button" value="隐藏" id="hide_all">

            <a href="index.html"><b><font color="BLACK" size="2">&lt;&lt; 返回主页</font></b></a>
        </h2>
        <br/>
        <span class="sp1">&nbsp;&nbsp;&nbsp;&nbsp;默认显示本月支出</span>
        <h3 style="height: 20px">&nbsp;&nbsp;<span id="time"></span></h3>
    </div>
    <div class="d2">
        <div class="d21">
            <p class="p2">本月支出总额：<span id="current-month-pay"></span>元

            </p>
            <p class="p2">本月日平均支出：<span id="current-month-avg"></span>元

            </p>
        </div>

        <div class="d21">
            <p class="p2">近7天日平均支出：<span id="7-days-avg"></span>元

            </p>
            <p class="p2">近30天日平均支出：<span id="30-days-avg"></span>元

            </p>
        </div>
    </div>
    <div class="d3">
        <p class="p1">已选年月支出：<span id="other-month-pay">（请选择）</span>元

        </p>
        <p class="p1">已选年月日平均支出：<span id="other-month-avg">（请选择）</span>元

        </p>

        <select id="sel_year">
            <option value="0">请选择年份</option>
            <option value="2023">2023</option>
            <option value="2022">2022</option>
            <option value="2021">2021</option>
            <option value="2020">2020</option>
            <option value="2019">2019</option>
            <option value="2018">2018</option>
        </select>
        年
        <select id="sel_month">
            <option value="0">请选择月份</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        月
        <input type="button" value="查询" title="若不选择条件，则视条件为所有" class="btn-query" onclick="query()">
        <input type="button" value="清空条件" title="清空查询条件" class="btn-clean" onclick="cleanSel()">
    </div>
</div>

<div class="center">
    <div class="left">
        <div class="left-up"></div>
        <div class="left-down">

        </div>
    </div>
    <div class="edit_main">
        <div class="top" style="text-align: center"><p class="add_record">添加一条记录</p></div>
        <div class="bottom">
            <div class="btm bottom_one">
                <div class="in">
                    <input type="image" src="images/eat.png" onclick="add('餐饮')"><br/>
                    <span>餐饮</span>
                </div>
                <div class="in">
                    <input type="image" src="images/house.png" onclick="add('住房')"><br/>
                    <span>住房</span>
                </div>
            </div>
            <div class="btm bottom_two">
                <div class="in">
                    <input type="image" src="images/communication.png" onclick="add('通讯')"><br/>
                    <span>通讯</span>
                </div>
                <div class="in">
                    <input type="image" src="images/traffic.png" onclick="add('交通')"><br/>
                    <span>交通</span>
                </div>
            </div>
            <div class="btm bottom_three">
                <div class="in">
                    <input type="image" src="images/daily.png" onclick="add('日用')"><br/>
                    <span>日用</span>
                </div>
                <div class="in">
                    <input type="image" src="images/education.png" onclick="add('学习')"><br/>
                    <span>学习</span>
                </div>
            </div>
            <div class="btm bottom_four">
                <div class="in">
                    <input type="image" src="images/clothes.png" onclick="add('服饰')"><br/>
                    <span>服饰</span>
                </div>
                <div class="in">
                    <input type="image" src="images/snacks.png" onclick="add('零食')"><br/>
                    <span>零食</span>
                </div>
            </div>
            <div class="btm bottom_five">
                <div class="in">
                    <input type="image" src="images/fruits.png" onclick="add('水果')"><br/>
                    <span>水果</span>
                </div>
                <div class="in">
                    <input type="image" src="images/medical.png" onclick="add('医疗')"><br/>
                    <span>医疗</span>
                </div>
            </div>
            <div class="btm bottom_six">
                <div class="in">
                    <input type="image" src="images/others.png" onclick="add('其它')"><br/>
                    <span>其它</span>
                </div>
                <div class="in">
                    <input type="image" src="images/today_event.png" onclick="addE()"><br/>
                    <span>事件</span>
                </div>
            </div>
        </div>
        <div class="div_add">
            <div class="content">
                <div class="content-up">
                    <span id="add_title" class="title-span"></span>
                </div>
                <div class="content-down">
                    <div class="content-left">
                        <div class="content-down-1">
                            <p class="pay">支出金额：</p>
                            <input type="number" id="price" min="0" max="9999" value="0" class="input_number">
                        </div>
                        <div class="content-down-2">
                            <p class="pay pay_detail">支出详细信息：</p>
                            <label>
                                <textarea rows="3" cols="30" id="details"></textarea>
                            </label>
                        </div>
                    </div>

                    <div class="content-left-1">

                        <div class="content-down-2">
                            <p class="pay pay_detail">详细信息：</p>
                            <label>
                                <textarea rows="6" cols="50" id="details_today"></textarea>
                            </label>
                        </div>
                    </div>

                    <div class="content-right" style="">
                        <div class="right-up">
                            <span>选择时间：</span>
                            <input type="date" value="" id="date">
                        </div>

                        <div class="right-down">
                            <input type="button" class="btn" value="取消" onclick="cancel()">
                            <input type="button" class="btn" value="提交" onclick="sbmt()" id="sbmt">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="right-top-space"></div>
        <div class="right-down">
            <p>导出数据到<a href="javascript:download()" class="a_download">Excel</a></p>
        </div>
    </div>
</div>
<table id="tb">
    <thead>
    <tr bgcolor="#CCCCCC">
        <th>
            日期
        </th>
        <th>
            餐饮
        </th>

        <th>
            住房
        </th>

        <th>
            通讯
        </th>

        <th>
            交通
        </th>

        <th>
            日用
        </th>

        <th>
            学习
        </th>

        <th>
            服饰
        </th>

        <th>
            零食
        </th>

        <th>
            水果
        </th>

        <th>
            医疗
        </th>

        <th>
            其他
        </th>

        <th>
            总共
        </th>

        <th>
            操作
        </th>
    </tr>
    </thead>

    <tbody id="tbody1">
<!--        数据列表-->
    </tbody>

</table>
</body>
</html>